<template>
    <div>
        <div v-title>保险公司</div>
        <div class="conter">
            <div class="title">您已选择：
                <span>{{TureName}}</span>
            </div>
            <div class="choose">
                <span></span>请选择保险公司
                <span></span>
            </div>
        </div>
        <van-radio-group v-model="isTure">
            <van-row class="baoxian">
                <van-col span="8" v-for="(item,index) in TableList" :key="index">
                    <div class="inname" :class="{active:allClass == item.ID}" @click="GetTure(index,item.Name,item.ID,item.IsEnable)">
                        <div class="InImg"><img :src="item.Logo"></div>
                        <p>{{item.Name}}</p>
                        <van-radio :name="item.ID" class="checker"></van-radio>
                    </div>
                </van-col>
            </van-row>
        </van-radio-group>
        <p class="kefu">百分保，让保费更好买</p>
        <p class="phone">客服热线：
            <span>400-170-1235</span>
        </p>
        <div class="bottomer" @click="showdialog">为爱车投保</div>
        <div class="dialog" v-show="dialog">
            <div class="dialoger">
                <div class="tabler" v-for="item,index in BXlist" :class="{bordercolor:isBlist == index}" @click="isBlist = index" :key="index">
                    <van-row>
                        <van-col span="12" style="padding-right:20px"><img class="imger" :src='item.imgdata'></van-col>
                        <van-col span="12" style="padding-left: 20px;padding-top: 3px">
                            <p style="text-align: left">{{item.name}}</p>
                        </van-col>
                    </van-row>
                </div>
                <p class="next" @click="GoNext">
                    <span>下一步</span>
                </p>
            </div>
            <div class="bottomIcon">
                <div class="arcleDiv" @click="dialog = false">
                    <span class="iconfont icon-guanbishanchu innerIcon"></span>
                </div>
                <!-- <span class="iconfont icon-2guanbi icloser" @click="dialog = false"></span>-->
            </div>

        </div>
    </div>
</template>
<script>
import api from '../fetch/api.js';
import { Row, Col, Radio, RadioGroup, Toast } from 'vant';
export default {
    components: {
        [Row.name]: Row,
        [Col.name]: Col,
        [Radio.name]: Radio,
        [RadioGroup.name]: RadioGroup,
        [Toast.name]: Toast
    },
    data() {
        return {
            isTure: 1,
            TableList: [],
            TureName: '',
            oldChecked: 0,
            allClass: this.$route.params.type,
            CID: this.$route.params.type,
            BXlist: [
                {
                    imgdata: 'http://upfile.nbbaijin.com/upload/20180328/73f4f6eea8df498cb49d5457a5d5202c.jpg',
                    name: '商业险'
                },
                {
                    imgdata: 'http://upfile.nbbaijin.com/upload/20180328/68d6215a9fec4044b4f3d3a55f2e7936.jpg',
                    name: '交强险'
                }
            ],
            isBlist: 0,
            dialog: false,
            taiPing: false
        }
    },
    created() {
        if (this.$route.params.type == 1) {
            this.isTure = 1;
            this.TureName = '阳光保险'
        } else if (this.$route.params.type == 2) {
            this.isTure = 2
            this.TureName = '太平保险'
        } else if (this.$route.params.type == 3) {
            this.isTure = 3
            this.TureName = '大地保险'
        } else if (this.$route.params.type == 4) {
            this.isTure = 4
            this.TureName = '中华联合保险'
        } else if (this.$route.params.type == 5) {
            this.isTure = 5
            this.TureName = '中国人保'
        } else if (this.$route.params.type == 6) {
            this.isTure = 6
            this.TureName = '太平洋保险'
        }
        //   this.isTured = this.$route.params.type
        api.GetInsuranceList().then(res => {
            for (let i = 0; i < res.length; i++) {
                this.TureName = res[this.$route.params.type - 1].Name
                this.TableList.push({
                    ID: res[i].ID,
                    Name: res[i].Name,
                    Logo: res[i].Logo,
                    IsEnable: res[i].IsEnable,
                })
            }
        })

    },
    methods: {
        showdialog() {
            if (this.taiPing) {
                Toast('因业务调整，该保险公司业务暂时下架，请选择其他保险公司');
                return
            }
            this.dialog = true
        },
        //选择
        GetTure(index, name, id, i) {
            this.allClass = id;
            this.TureName = name;
            this.isTure = id;
            console.log(name)
            if (i == 1) {
                this.taiPing = true
                return
            }
            this.CID = id;
            this.taiPing = false
        },
        GoNext() {
            if (this.isBlist == 0) {
                this.$router.push('/Offer/' + this.CID + '/' + this.TureName)
            } else {
                this.$router.push('/Single/' + this.CID + '/' + this.TureName)
            }
        }
    }
}
</script>
<style>
.van-radio .van-icon-checked {
    color: #2491ff
}
</style>

<style scoped>
p {
    margin: 0
}

.conter {
    padding: 0 20px;
    background: #fff
}

.title {
    font-size: 14px;
    color: #333;
    padding: 15px 0;
    border-bottom: 1px solid #eee
}

.title span {
    color: #2491ff
}

.choose {
    color: #666666;
    font-size: 14px;
    text-align: center;
    position: relative;
    padding-top: 20px;
}

.choose span:first-child {
    width: 13%;
    height: 1px;
    display: block;
    position: absolute;
    top: 31px;
    background: #333;
    left: 22%;
}

.choose span:last-child {
    width: 13%;
    height: 1px;
    display: block;
    position: absolute;
    top: 31px;
    background: #333;
    right: 22%;
}

.baoxian {
    background: #fff;
    padding: 10px 0;
}

.inname {
    width: 80%;
    text-align: center;
    border: 1px solid #f3f3f3;
    border-radius: 5px;
    padding: 15px 0;
    font-size: 14px;
    margin: 12px auto;
    position: relative
}

.InImg {
    width: 60%;
    margin: auto;
}

.InImg img {
    width: 100%
}

.checker {
    position: absolute;
    top: 5px;
    right: 0;
}

.kefu {
    font-size: 16px;
    color: #999;
    text-align: center;
    margin-top: 30px;
}

.phone {
    font-size: 14px;
    text-align: center;
    color: #999;
    margin: 10px 0 70px 0
}

.phone span {
    color: #2491ff
}

.bottomer {
    text-align: center;
    background: #2491ff;
    color: #fff;
    height: 51px;
    line-height: 51px;
    position: fixed;
    bottom: 0;
    width: 100%;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

.active {
    border-color: #2491ff
}

.dialog {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    background-color: rgba(0, 0, 0, 0.7);
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

.dialoger {
    width: 75%;
    margin: auto;
    height: 330px;
    background: #fff;
    margin-top: 30%;
    border-radius: 10px;
    position: relative;
}

.tabler {
    width: 80%;
    padding: 30px 0;
    text-align: center;
    border-radius: 10px;
    border: 1px solid #eeeeee;
    float: left;
    margin-top: 20px;
    margin-left: 10%;
    font-size: 18px
}

.next {
    float: left;
    padding-top: 40px;
    width: 100%;
    text-align: center;
    color: #2491ff
}

.next span {
    padding: 5px 10px;
    border: 1px solid;
    border-radius: 5px
}

.bordercolor {
    border: 1px solid #2491ff;
    color: #2491ff
}

.bottomIcon {
    text-align: center;
    margin-top: 15px;
}

.bottomIcon .icloser {}

.icloser {
    font-size: 35px;
    color: #c5c6c8;
    /* position: absolute;
    top: -25px;
    right: -28px;*/
}

.arcleDiv {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid #c5c6c8;
    margin: 0 auto;
}

.innerIcon {
    color: #fff;
    font-size: 18px;
    line-height: 31px;
}

.imger {
    width: 55%;
    float: right;
}
</style>
<style>
.van-checkbox__control:checked+.van-icon-success {
    border-color: #2491ff;
    background-color: #2491ff;
}
</style>